<template>
  <div>
    <h2 align="center">用户详情注册表</h2>
    <table class="table table-borderd">
      <tr>
        <td align="right">真实姓名：</td>
        <td><input type="text" v-model="state.U_Name"></td>
      </tr>
      <tr>
        <td align="right">身份证号码：</td>
        <td><input type="text" v-model="state.U_IdCard" maxlength="18"/></td>
      </tr>
      <tr>
        <td align="right">用户类型：</td>
        <td>
          <select v-model="state.UT_Id">
            <option value="0">请选择</option>
            <option v-for="item in list" :value="item.UT_Id">{{ item.UT_Name }}</option>
          </select>
        </td>
      </tr>
      <tr>
        <td align="right">联系方式：</td>
        <td><input type="text" v-model="state.U_Phone" maxlength="11"/></td>
      </tr>
      <tr>
        <td align="right">出生日期：</td>
        <td><input type="date" v-model="state.U_Date"/></td>
      </tr>
      <tr>
        <td align="right">性别：</td>
        <td>
          <input type="radio" name="sex" v-model="state.U_Sex" :value="true"/>男
          <input type="radio" name="sex" v-model="state.U_Sex" :value="false"/>女
        </td>
      </tr>
      <tr>
        <td align="right">年收入：</td>
        <td><input type="text" v-model="state.U_Income"/></td>
      </tr>
      <tr>
        <td align="right"></td>
        <td>
          <input type="button" value="保存" @click="save" class="btn btn-success" style="margin-right: 10px"/>
          <input type="button" value="返回" class="btn btn-info"/>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
  import axios from 'axios';
  import {reactive,toRefs,onMounted} from 'vue'
  import { useRoute,useRouter} from 'vue-router'

  //接受参数
  const route = useRoute()     //作用：接受参数  route.query.id
  const router = useRouter()   //作用：跳转并传递参数   router.push('/register')  router.push({path:'/register',query:{id:1}})
  //数据------------------------------------

  let data:any = reactive({
    list:[],
    state:{
      U_Name:'',
      U_Phone:'',
      U_Date:'',
      U_Sex:true,
      U_Income:'',
      U_IdCard:'',
      UT_Id:'0',
      UL_Id:route.query.id
    }
  })

  let { list,state } = toRefs(data)

  //1.页面一打开就要加载用户类型
  onMounted(()=>{
    getUserType()
  })

  //函数----------------------------------------
  //点击保存
  const save = ()=>{
    //1.验证非空和有效性
    //真实姓名
    if(state.value.U_Name == ""){
      alert("真实姓名不能为空");
      return
    }
    if(state.value.U_IdCard == ""){
      alert("身份证号码不能为空");
      return;
    }
    let reg = /^\d{17}[0-9x]$/i
    if(reg.test(state.value.U_IdCard) == false){
      alert("身份证号码不符合要求");
      return;
    }
    
    if(state.value.UT_Id == 0){
      alert("用户类型必选");
      return;
    }

    if(state.value.U_Phone  == ""){
      alert("手机号不能为空");
      return;
    }
    let reg1 = /^1\d{10}$/
    if(reg1.test(state.value.U_Phone) == false){
      alert("手机号不符合要求");
      return;
    }

    if(state.value.U_Date == ""){
      alert("出生日期不能为空");
      return
    }
    if(state.value.U_Income == ""){
      alert("年收入不能为空");
      return;
    }
    //年收入必须是个数字
    if(isNaN(state.value.U_Income) == true){
      alert("必须填写数字");
      return;
    }
    if(state.value.U_Income < 100000){
      alert("年收入不能小于100000");
      return;
    }
    //2.发送网络请求
    axios({
      url:'/api/Users/PostAddUserInfo',
      method:'post',
      data:state.value
    })
    .then(res=>{
      console.log(res);
      if(res.data.data >0){
        alert("用户完善成功");
        router.push("/main")
      }else{
        alert("用户完善失败");
        return;
      }
      
    })
    .catch(err=>{
      console.log(err);
      
    })
  }

  //作用：获取用户类型
  const getUserType = ()=>{
    axios({
      url:'/api/Users/GetUserTypes',
      method:'get'
    })
    .then(res=>{
      console.log(res);
      list.value = res.data.data;
    })
    .catch(err=>{
      console.log(err);
      
    })
  }


</script>

<style scoped>

</style>